<script setup lang="ts" name="NavigationBarProperty">
import { NavigationBarProperty } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'
import NavigationBarCellProperty from './components/CellProperty.vue'
// 导航栏属性面板
// 表单校验
const rules = {
  name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }]
}

const props = defineProps<{ modelValue: NavigationBarProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)
if (!formData.value._local) {
  formData.value._local = { previewMp: true, previewOther: false }
}
</script>

<template>
  <ElForm label-width="80px" :model="formData" :rules="rules">
    <ElFormItem label="样式" prop="styleType">
      <ElRadioGroup v-model="formData!.styleType">
        <ElRadio label="normal">标准</ElRadio>
        <ElTooltip content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件" placement="top">
          <ElRadio label="inner">沉浸式</ElRadio>
        </ElTooltip>
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem v-if="formData.styleType === 'inner'" label="常驻显示" prop="alwaysShow">
      <ElRadioGroup v-model="formData!.alwaysShow">
        <ElRadio :label="false">关闭</ElRadio>
        <ElTooltip content="常驻显示关闭后,头部小组件将在页面滑动时淡入" placement="top">
          <ElRadio :label="true">开启</ElRadio>
        </ElTooltip>
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem label="背景类型" prop="bgType">
      <ElRadioGroup v-model="formData.bgType">
        <ElRadio label="color">纯色</ElRadio>
        <ElRadio label="img">图片</ElRadio>
      </ElRadioGroup>
    </ElFormItem>
    <ElFormItem v-if="formData.bgType === 'color'" label="背景颜色" prop="bgColor">
      <ColorInput v-model="formData.bgColor" />
    </ElFormItem>
    <ElFormItem v-else label="背景图片" prop="bgImg">
      <UploadImage v-model="formData.bgImg" :limit="1" width="56px" height="56px" />
    </ElFormItem>
    <ElCard class="property-group" shadow="never">
      <template #header>
        <div class="flex items-center justify-between">
          <span>内容（小程序）</span>
          <ElFormItem prop="_local.previewMp" class="m-b-0!">
            <ElCheckbox v-model="formData._local.previewMp" @change="formData._local.previewOther = !formData._local.previewMp">预览</ElCheckbox>
          </ElFormItem>
        </div>
      </template>
      <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
    </ElCard>
    <ElCard class="property-group" shadow="never">
      <template #header>
        <div class="flex items-center justify-between">
          <span>内容（非小程序）</span>
          <ElFormItem prop="_local.previewOther" class="m-b-0!">
            <ElCheckbox v-model="formData._local.previewOther" @change="formData._local.previewMp = !formData._local.previewOther">预览</ElCheckbox>
          </ElFormItem>
        </div>
      </template>
      <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
    </ElCard>
  </ElForm>
</template>

<style scoped lang="scss"></style>
